<template>
    <div>
        <n-radio-group v-model:value="checkValue" name="radiogroup">
            <n-space>
                <n-radio v-for="view in views" :key="view.value" :value="view.value">
                    {{ view.label }}
                </n-radio>
            </n-space>
        </n-radio-group>
        <json-tabs v-show="checkValue === 'JsonFormat'"></json-tabs>
        <date-and-time v-show="checkValue === 'DateAndTime'"></date-and-time>
        <json-to-bean v-show="checkValue === 'JsonToBean'"></json-to-bean>
        <image-transform v-show="checkValue === 'ImageTransform'"></image-transform>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import DateAndTime from './date/DateAndTime.vue'
import JsonToBean from './json/JsonToBean.vue'
import ImageTransform from './image/index.vue'
import JsonTabs from './json/JsonTabs.vue'
const checkValue = ref('JsonFormat')
const views = ref([{
    label: 'JSON格式化',
    value: 'JsonFormat'
}, {
    label: 'JSON转实体类',
    value: 'JsonToBean'
}, {
    label: '日期时间',
    value: 'DateAndTime'
}, {
    label: '图片处理',
    value: 'ImageTransform'
}])


</script>

<style scoped></style>